前面已經學習如何更改指定節點的內容
今天來介紹如何取出指定節點的資料值

innerHTML

使用 innerHTML 取出指定節點內的 HTML 結構

HTML

<ul class="list">
    <li>1</li>
    <li>2</li>
  </ul>

JS

const list = document.querySelector('.list');
console.log(list.innerHTML);
// 結果顯示為 
// <li>1</li>
// <li>2</li>

textContent

取得指定節點的文字資料值

<h1 class="header">大大大優惠</h1>

const header = document.querySelector('.header');
console.log(header.textContent);  // 結果為大大大優惠

getAttritube

可以取得指定元素內的屬性值

HTML

<a href="https://www.google.com.tw" class ="link">google</a>

JS

const el = document.querySelector('.link');
console.log(el.getAttribute('href'));  // 代表會取得 href 的屬性資料，結果會顯示 https://www.google.com.tw
console.log(el.getAttribute('class'));  // 代表會取得 class 的屬性資料，結果會顯示 link

參考資料與學習資源

• 0 陷阱！0 誤解！8 天重新認識 JavaScript！
• JavaScript 指南
• 六角學院 - JavaScript 必修篇 - 前端修練全攻略

本日小節

今天練習取得節點資料內的屬性、HTML 結構以及文字資料，今天的學習部份就到這邊了～
有任何問題歡迎傳訊息給我，我們下次見！